<template>
    <div class='body'>
        <div class="main">
            <div class="top">
                <el-button type="primary" @click="fk">添加新公告</el-button>
            </div>
            <div class="bom">
                <el-table :data="tableData" stripe style="width: 40%">
                    <el-table-column prop="txt" label="公告" width="180" />
                    <el-table-column prop="time" label="发布时间" width="180" />
                    <el-table-column prop="status" label="状态" />
                    <el-table-column label="Operations">
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                                切换状态
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
    <!-- 创建 -->
    <el-dialog v-model="dialogVisible1" title="Tips" width="500">
        <span>反馈信息:</span>
        <el-input v-model="txt" style="width: 240px" placeholder="请输入反馈信息" />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取消</el-button>
                <el-button type="primary" @click="qdfk">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang='ts'>
import { upgao, gaodata, addgao, toudata } from '@/api/info/index'
import moment from 'moment';
import { ElMessage } from 'element-plus'
import { useCountStore } from "@/store/count";
const qxstore = useCountStore()
const open4 = (data?: any) => {
    if (data) {
        ElMessage.error(data)
    } else {
        ElMessage.error('Oops, this is a error message.')
    }
}
const open2 = (data?: any) => {
    if (data) {
        ElMessage({
            message: data,
            type: 'success',
        })
    } else {
        ElMessage({
            message: 'Congrats, this is a success message.',
            type: 'success',
        })
    }

}
let tableData = ref()
let imgs = ref()
onMounted(() => {


    // 获取当前时间
    // const loginTime1 = new Date();
    // let aaa = moment(loginTime1).format('YYYY-MM-DD HH:mm:ss');
    // console.log("aaaa", aaa);


    // 测试base64存储
    toudata().then((res: any) => {
        console.log("imgs", res);
        imgs.value = res.data[0].tou

    })
    aaa()
})
let aaa = () => {
    gaodata().then(res => {
        console.log("gao", res);
        res.data.forEach((item: any) => {
            item.time = moment(item.tiem).format('YYYY-MM-DD HH:mm:ss');
            item.status = item.k == 1 ? true : false
        })
        tableData.value = res.data.reverse()
    })
}
// 创建
const dialogVisible1 = ref(false)
let txt = ref()
let fk = () => {
    dialogVisible1.value = true
}
let qdfk = () => {
    addgao({
        txt: txt.value,
        k: true
    }).then(res => {
        open2(res.data.msg)
        aaa()
        dialogVisible1.value = false
    })
}
// 切换状态
let k = ref()
let handleEdit = (i: any, data: any) => {
    console.log(data);
    if (data.status) {
        k.value = false
    } else {
        k.value = true
    }
    upgao({
        k: k.value,
        gaoid: data.gaoid
    }).then(res => {
        aaa()
        open2(res.data.msg)
    })
}
</script>
<style  lang='less'>
.body {
    background-color: rgb(245, 249, 250);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .main {
        width: 80%;
        height: 95%;
        // background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .top {
            width: 100%;
            height: 10%;
            background-color: #fff;
            box-sizing: border-box;
            padding: 10px 0px 10px 25px;
            display: flex;
            align-items: center;
        }

        .bom {
            width: 100%;
            height: 89%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: #fff;
            box-sizing: border-box;
            padding-top: 25px;
            padding-left: 10px;
        }
    }
}
</style>